<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
      <h1 key="1" v-show="!isShow" >你好啊！！！！！！！！</h1>
      <h1 key="2" v-show="isShow" >哈哈哈哈！！！！！！！！</h1>
    </transition-group>

  </div>
</template>

<script>
export default {
  name: "Test",
  description: '',
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      isShow: true
    }
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {}
}
</script>

<style scoped>
h1 {
  background-color: orange;
  transition: 0.5s linear;
}
/*进入的起点，离开的终点*/
.hello-enter,.hello-leave-to{
  transform: translateX(-100%);
}
/*进入的终点，离开的起点*/
.hello-enter-to,.hello-leave{
  transform: translateX(0);
}


</style>